<template>
  <div>
    <div style="display:flex;flex-wrap:wrap">
      <el-card
        v-for="(item, index) in imgtype"
        :key="index"
        :bodyStyle="{ padding: '0px' }"
        style="margin:20px 2%;cursor:pointer;"
        shadow="hover"
      >
        <img
          :src="item.url"
          height="100%"
          style="display:inline-block;margin:0 auto"
          @click="showdia(item)"
        />
      </el-card>
    </div>
    <el-dialog :title="title" @close="closebig" :visible.sync="dialogVisible">
      <leaveform v-if="isleaveform" @closedia="closedia" :status="0" :timename="'请假时间'"></leaveform>
      <gooutform v-if="isgooutform" @closedia="closedia" :status="0"></gooutform>
      <moneyform v-if="ismoneyform" @closedia="closedia" :status="0"></moneyform>
      <carform v-if="iscarform" @closedia="closedia" :status="0"></carform>
      <reimform v-if="isreimform" @closedia="closedia" :status="0"></reimform>
      <repairform v-if="isrepairform" @closedia="closedia" :status="0"></repairform>
      <contractform v-if="iscontractform" @closedia="closedia" :status="0"></contractform>
    </el-dialog>
  </div>
</template>

<script>
import leaveform from '~/components/sptype/leave.vue';
import gooutform from '~/components/sptype/goout.vue';
import moneyform from '~/components/sptype/money.vue';
import carform from '~/components/sptype/car.vue';
import reimform from '~/components/sptype/reim.vue';
import repairform from '~/components/sptype/repair.vue';
import contractform from '~/components/sptype/contract.vue';

export default {
  components: {
    leaveform,
    gooutform,
    moneyform,
    carform,
    reimform,
    repairform,
    contractform,
  },
  data() {
    return {
      isleaveform: false,
      isgooutform: false,
      ismoneyform: false,
      iscarform: false,
      isreimform: false,
      isrepairform: false,
      iscontractform: false,
      dialogVisible: false,

      title: '',
      imgtype: [
        {
          url: '/images/bxzj.png',
          label: '报销审批',
        },
        {
          url: '/images/clwx.png',
          label: '车辆维修审批',
        },
        {
          url: '/images/qj.png',
          label: '请假审批',
        },
        {
          url: '/images/zj.png',
          label: '资金审批',
        },
        {
          url: '/images/hyxx.png',
          label: '外出会议、培训、学习、申报审批',
        },
        {
          url: '/images/sbwx.png',
          label: '设备维修审批',
        },
        {
          url: '/images/ht.png',
          label: '合同审批',
        },
      ],
    };
  },
  watch: {},
  methods: {
    closedia(val) {
      this.$nextTick(() => {
        this.dialogVisible = val;
      });
    },
    // 公共组件刷新方法
    reload(partsname) {
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    closebig() {
      this.isleaveform = false;
      this.isgooutform = false;
      this.ismoneyform = false;
      this.iscarform = false;
      this.isreimform = false;
      this.isrepairform = false;
      this.iscontractform = false;
    },
    showdia(item) {
      console.log(item);
      if (item.label == '请假审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('isleaveform');
      } else if (item.label == '外出会议、培训、学习、申报审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('isgooutform');
      } else if (item.label == '资金审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('ismoneyform');
      } else if (item.label == '车辆维修审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('iscarform');
      } else if (item.label == '报销审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('isreimform');
      } else if (item.label == '设备维修审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('isrepairform');
      } else if (item.label == '合同审批') {
        this.title = item.label;
        this.dialogVisible = true;
        this.reload('iscontractform');
      }
    },
  },
};
</script>

<style>
</style>
